﻿@page "/categoryPage"
@using Joker.LearnBlazor.WebService.Models
@using Joker.LearnBlazor.WebService.Repository

@inject ICategory _category
@inject IProduct _product
@inject IMessageService _message

<Layout Style="min-height: 100vh; ">
    <Sider Width="250" Style="background-color:white">
        <h3>分类管理</h3>
        <Tree DefaultExpandAll Draggable OnDragEnd="e=> { }" OnDrop="onDrop" DataSource="calist" OnSelect="OnSelect" TitleExpression="x=>GetTreeTitle(x.DataItem)" ChildrenExpression="x=>x.DataItem.Items"
               KeyExpression="x=>x.DataItem.CategoryId.ToString()"
               TItem="Category">
         </Tree>
     </Sider>

     <Layout Class="site-layout" Style="padding:10px;">
         <Space Direction="DirectionVHType.Vertical">
             <SpaceItem>
                 <Card Title="新增">
                     <Body>
                         <Form Model="@addModel" OnFinish="SubAdd">
                             <FormItem Label="分类名称">
                                 <Input @bind-Value="@context.CategoryName" />
                             </FormItem>

                             <FormItem Label="父级分类">
                                 <TreeSelect TItem="Category" Style="width:100%;" DataSource="calist" @bind-Value="@addPId" Placeholder="请选择" AllowClear TreeDefaultExpandAll ChildrenExpression="node=>node.DataItem.Items" TitleExpression="node=>node.DataItem.CategoryName" KeyExpression="node=>node.DataItem.CategoryId.ToString()" IsLeafExpression="node=>node.DataItem.Items.Count()==0">

                                 </TreeSelect>
                             </FormItem>
                             <Button Type="@ButtonType.Primary" HtmlType="submit" Icon="@IconType.Outline.Plus">新增</Button>
                         </Form>
                     </Body>
                 </Card>
             </SpaceItem>
             <SpaceItem>
                 <Card Title="编辑">
                     <Body>
                         <p>
                             <Input Placeholder="分类名称" @bind-Value="@editModel.CategoryName"></Input>
                         </p>
                         <p>
                             <Input Placeholder="排序号" @bind-Value="@editModel.Sort"></Input>
                         </p>

                         <p>
                             <Input @bind-Value="@editModel.CategoryName"></Input>
                         </p>
                         <p>
                             <Button Type="@ButtonType.Primary" OnClick="SubEdit" Icon="@IconType.Outline.Edit">编辑</Button>
                         </p>
                     </Body>
                 </Card>
             </SpaceItem>
             <SpaceItem>
                 <Card Title="删除">
                     <Body>
                         <p>
                             待删除的分类:@delModel.CategoryName
                        </p>
                        <p>
                            <Popconfirm Title="是否确认删除" Placement="@Placement.Right" OnConfirm="SubDelete">
                                <Button Danger Type="@ButtonType.Primary" Icon="@IconType.Outline.Delete">删除</Button>
                             </Popconfirm>
                         </p>
                     </Body>
                 </Card>
             </SpaceItem>
         </Space>
     </Layout>
 </Layout>


 @code {

    #region 绑定
    protected override void OnInitialized()
    {
        base.OnInitialized();
        BindData();
    }

    private void BindData()
    {
        calist = _category.GetTreeModel();
    }
    #endregion

    #region 拖拽

    void onDrop(TreeEventArgs<Category> e)
    {
        Category nowCa = e.Node.DataItem;
        Category targetCa = e.TargetNode.DataItem;  // 拖动到该节点的底部
        if (e.DropBelow == true)
        {
            // 同一级,下方
            nowCa.ParentId = targetCa.ParentId;
            nowCa.Sort = targetCa.Sort + 1;
            nowCa.CategoryPath = targetCa.CategoryPath;
        }
        else
        {
            // 下一级
            nowCa.ParentId = targetCa.CategoryId;
            nowCa.Sort = 0;
            nowCa.CategoryPath = targetCa.CategoryPath + targetCa.CategoryId + ",";
        }
        _category.Update(nowCa);
        _message.Info("编辑成功");
        BindData();

    }

    #endregion

    #region 新增

    private Category addModel = new Category();

    private string addPId = ""; // 新增时的所选父级ID
    public void SubAdd()
    {
        addModel.ParentId = string.IsNullOrEmpty(addPId) ? 0 : int.Parse(addPId);
        if (addModel.ParentId == 0)
        {
            // 顶级分类
            addModel.CategoryPath = "";
        }
        else
        {
            Category ca = _category.GetModel(addModel.ParentId);
            addModel.CategoryPath = ca.CategoryPath + ca.CategoryId + ",";
        }
        _category.Add(addModel);
        _message.Info("新增分类成功");
        addModel = new Category();
        BindData();
    }

    #endregion

    #region 编辑名称

    private Category editModel = new Category();

    private void SubEdit()
    {
        Category ca = _category.GetModel(editModel.CategoryId);
        ca.CategoryName = editModel.CategoryName;
        ca.Sort = editModel.Sort;
        _category.Update(ca);
        _message.Info("编辑分类成功");
        editModel = new Category();
        BindData();
    }

    #endregion

    #region 删除

    private Category delModel = new Category();
    private void SubDelete()
    {
        try
        {
            _category.Delete(delModel.CategoryId);
            _message.Info("删除分类成功");
            delModel = new Category();
            BindData();
        }
        catch (Exception ex)
        {
            _message.Error("删除分类出错:" + ex.Message);
        }

    }

    #endregion

    #region 分类树

    //商品分类
    private List<Category> calist;

    // 选择树节点
    void OnSelect(TreeEventArgs<Category> args)
    {
        Category selCa = args.Node.DataItem;
        editModel = selCa;
        delModel = selCa;
    }

    // 节点显示商品数
    private string GetTreeTitle(Category ca)
    {
        return ca.CategoryName + "(商品数:" + _product.CalcCount(ca.CategoryId) + ")";
    }

    #endregion
}




<style>
    #components-layout-demo-side .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
    }

    .site-layout .site-layout-background {
        background: #fff;
    }
</style>


